<template>
    <div class="comment" :style="{ marginLeft: level * 20 + 'px', wordBreak: 'break-all' }">
        <div style="display: flex; justify-content: space-between; align-items: center;">
            <div style="display: flex;width: 100% ">
                <img :src="comment.userAccount.avatar || logo" class="avatar"
                    :style="{ width: 40 - level * 4 + 'px', height: 40 - level * 4 + 'px', marginRight: 10 + 'px' }" />
                <div style="min-height: 40px;padding: 10px 0; width: 100%;">
                    <div style="display: flex; justify-content: space-between; width: 100%;">
                        <div style="display: flex;">
                            <span> {{ comment.author }} </span>
                            <!-- 如果是根评论 -->
                            <div v-if="comment.parent">
                                <span style="color:#999aaa;font-size: 14px; margin: 0 10px;">回复</span>
                                <span style="color:rgb(119, 120, 136)">{{ comment.parent?.author }}</span>
                            </div>
                            <span style="color:#999aaa;font-size: 14px; margin: 0 10px;">{{
                                dayForMat(comment.createTime, 'YYYY-MM-DD HH: mm: ss') }}</span>
                        </div>
                        <div style="display: flex; align-items: center;">
                            <el-dropdown style="margin: 0 10px;" v-show="comment.userAccount.uuid === uuid">
                                <span class="el-dropdown-link">
                                    <el-icon>
                                        <More />
                                    </el-icon>
                                </span>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item><el-button link type="danger"
                                                @click="handleDelComment(comment)">删除</el-button></el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                            <el-popover placement="top" :width="400" trigger="click">
                                <template #reference>
                                    <el-button type="default" link>
                                        <el-icon>
                                            <ChatSquare />
                                        </el-icon>
                                        <span @click="handleFocus">回复</span>
                                    </el-button>
                                </template>
                                <div style="width: 100%;">
                                    <el-input type="textarea" :placeholder="`回复：${comment.author}`" :rows="6" ref="iptRef"
                                        maxlength="1000" v-model="content"></el-input>
                                    <div class="content-bottom">
                                        <span>还能输入<b style="color:orange">{{ 1000 - content.length }}</b>个字符</span>
                                        <div style="padding: 10px;">
                                            <el-button round type="warning" size="small"
                                                @click="handleReply(comment)">回复</el-button>
                                        </div>
                                    </div>
                                </div>
                            </el-popover>
                            <el-button link @click="handleFavor(comment)" :type="comment.likers.find(item=>item.uuid===uuid)?'danger':'default'">
                                <span v-if="comment.likers.length">{{ comment.likers.length }}</span>
                                <el-icon>
                                    <Pointer />
                                </el-icon>
                            </el-button>
                        </div>
                    </div>
                    <p style="margin-top: 15px;">{{ comment.content }}</p>
                </div>
            </div>
        </div>
    </div>
    <Comment v-if="comment.replies?.length" v-for="child in comment.replies" :key="child.id" :comment="child"
        @handle-reply="handleChildReply" :level="level + 1" @handle-del="handleDelChild" @handle-favor="handleChildFavor" />
</template> 
<script setup lang='ts'>
import { ref, reactive, onMounted, nextTick } from 'vue'
import logo from '@/assets/images/logo.jpg'
import { ChatSquare, More, Pointer } from '@element-plus/icons-vue'
import { dayForMat } from '@/utils';
import Comment from './index.vue'
import { useUserInfoStore } from '@/stores';
const userInfoStore = useUserInfoStore()
const { uuid } = userInfoStore.userInfo
interface Comment {
    id: number;
    content: string;
    author: string;
    createTime: string;
    replies?: Comment[];
    userAccount: {
        avatar: string,
        nickname: string,
        uuid: string
    },
    parent?: Comment,
    likers: Array<any>

}
withDefaults(defineProps<{
    comment: Comment,
    level?: number
}>(), {
    level: 0
})

const emit = defineEmits(['handle-reply', 'handle-del', 'handle-favor'])

const content = ref('')
const iptRef = ref<HTMLInputElement>()

const handleReply = (comment: Comment) => {
    emit('handle-reply', content.value, comment.id)
}

const handleChildReply = (content: string, articleId: number) => {
    emit('handle-reply', content, articleId)
}

const handleDelComment = (comment: Comment) => {
    emit('handle-del', comment.id)
}
const handleDelChild = (commentId: number) => {
    emit('handle-del', commentId)
}

const handleFavor = (comment: Comment) => {
    emit('handle-favor', comment.id)
}

const handleChildFavor = (commentId: number) => {
    emit('handle-favor', commentId)
}


const handleFocus = () => {
    nextTick(() => {
        setTimeout(() => {
            iptRef.value?.focus()
        }, 50)
    })

}


</script>
<style scoped lang="scss">
.content-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>